<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册页面</title>
  <!-- 引入 Element Plus CSS -->
  <link rel="stylesheet" href="./static/element-plus/index.css">
  <!-- 引入本地 Vue 3 -->
  <script src="./static/js/vue.global.js"></script>
  <!-- 引入本地 Element Plus -->
  <script src="./static/element-plus/index.full.js"></script>
  <style>
    .container {
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f9f9f9f9;
    }
    .error-message {
      color: red;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <el-form :model="form" ref="form" label-width="100px">
      <el-form-item label="用户名" prop="username" :rules="[
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 4, message: '用户名长度不少于4个字符', trigger: 'blur' }
      ]">
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" :rules="[
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不少于6个字符', trigger: 'blur' }
      ]">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword" :rules="[
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: validateConfirmPassword, trigger: 'blur' }
      ]">
        <el-input type="password" v-model="form.confirmPassword" placeholder="请再次输入密码"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age" :rules="[
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { validator: validateAge, trigger: 'blur' }
      ]">
        <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="兴趣爱好">
        <el-checkbox-group v-model="form.hobbies">
          <el-checkbox label="阅读"></el-checkbox>
          <el-checkbox label="运动"></el-checkbox>
          <el-checkbox label="旅行"></el-checkbox>
          <el-checkbox label="数码"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" :rules="[
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address" :rules="[
        { required: true, message: '请输入地址', trigger: 'blur' }
      ]">
        <el-input v-model="form.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm"></el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      v-model="dialogVisible"
      title="请确认注册信息"
      width="500px"
    >
      <div>
        <p>用户名: {{ form.username }}</p>
        <p>年龄: {{ form.age }}</p>
        <p>性别: {{ form.gender }}</p>
        <p>兴趣爱好: {{ form.hobbies.join(', ') }}</p>
        <p>邮箱: {{ form.email }}</p>
        <p>地址: {{ form.address }}</p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmRegistration">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <script>
    var app = {
      data() {
        return {
          form: {
            username: '',
            password: '',
            confirmPassword: '',
            age: '',
            gender: '',
            hobbies: [],
            email: '',
            address: ''
          },
          dialogVisible: false
        };
      },
      methods: {
        // 自定义验证规则：验证确认密码
        validateConfirmPassword(rule, value, callback) {
          if (value !== this.form.password) {
            callback(new Error('两次输入的密码不一致'));
          } else {
            callback();
          }
        },
        // 自定义验证规则：验证年龄
        validateAge(rule, value, callback) {
          const age = Number(value);
          if (!Number.isInteger(age) || age <= 0) {
            callback(new Error('请输入有效的年龄'));
          } else {
            callback();
          }
        },
        submitForm() {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.dialogVisible = true;
            } else {
              console.log('表单验证失败！');
              return false;
            }
          });
        },
        resetForm() {
          this.$refs.form.resetFields();
        },
        confirmRegistration() {
          this.$message.success('注册成功！');
          this.dialogVisible = false;
          this.resetForm();
        }
      }
    };

    Vue.createApp(app).use(ElementPlus).mount("#app");
  </script>
</body>
</html>